<template>
 <div>
     <el-input v-model="userName" placeholder="请输入姓名"></el-input>
     <el-input text="number" v-model.number="age" placeholder="请输入年龄" min="0" max="99999999"></el-input>
     <el-checkbox-group v-model="weekValue" size="mini">
      <el-checkbox-button v-for="week in checkList" :label="week.value" :key="week.value">{{week.lable}}</el-checkbox-button>
    </el-checkbox-group>
    <hr/>
    <el-button type="primary" @click="getCheck">获取复选框数据</el-button>
    <Address v-model="addressInfo"></Address>
     <el-button type="primary" @click="save">保存</el-button>
 </div>
</template>

<script>
import Address from './Address.vue'
 export default {
   data () {
     return {
        userName:'',
        age:null,
        weekValueStr:'1,3,5',
        weekValue:['5'],
        checkList:[
          {value:'1',lable:'周一'},
          {value:'2',lable:'周二'},
          {value:'3',lable:'周三'},
          {value:'4',lable:'周四'},
          {value:'5',lable:'周五'},
          {value:'6',lable:'周六'}
        ],
        addressInfo:{
          contactor:'',
          address:'',
          telphone:''
        }
     }
   },
   components:{
      Address
   },
   props:["list"],
   methods:{
       save(){
           this.list.push({userName:this.userName,age:this.age})
           this.userName=''
           this.age=null
           this.$forceUpdate();
       },
       getCheck(){
         console.log(this.weekValue)
         console.log(this.addressInfo)
       }
   },
   watch: {
     addressInfo: {
         handler: function() {
            console.log(this.addressInfo)
         },
         deep: true
     }
   }
 }
</script>

<style>

 
</style>
